<template>
  <z-paging ref="paging" refresher-only @onRefresh="onRefresh" @scrolltolower="scrolltolower">
    <template #top>
      <MrCustom bg-color="bg-gradual-blue " is-back>
        <template #backText>
          返回
        </template>
      </MrCustom>
    </template>
    <view>
      <view style="font-size: 40px;font-weight: 700;text-align: center;"></view>
    </view>
    <view>
      <view style="z-index: 100;position: sticky;top :0;">
        <z-tabs ref="tabs" :current="current" :list="tabList" @change="tabChange"/>
      </view>
      <swiper :style="[{height:swiperHeight+'px'}]" :current="current" @transition="swiperTransition"
              @animationfinish="swiperAnimationfinish">
        <swiper-item v-for="(item, index) in tabList" :key="index">
          <appointment-swiper
              :tabIndex="index" :currentIndex="current"
              :ref="el=>{setRef(el,index)}"
              @heightChanged="heightChanged">
          </appointment-swiper>
        </swiper-item>
      </swiper>
    </view>
  </z-paging>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import myMoment from "@/utils/common/myMoment";
import AppointmentSwiper from "@/pages/patient/appointment/components/AppointmentSwiper.vue";
import HospitalPopupSelect from "@/components/common/select/HospitalPopupSelect.vue";
import MrCustom from "@/components/common/MrCustom.vue";

const paging = ref()
const swiperList = ref([])
const tabs = ref()
const swiperHeight = ref(0)
const current = ref(0)
const tabList = ref(['全部', myMoment().add(0, 'd').format('MMMDo'),
  myMoment().add(1, 'd').format('MMMDo'),
  myMoment().add(2, 'd').format('MMMDo'),
  myMoment().add(3, 'd').format('MMMDo'),
  myMoment().add(4, 'd').format('MMMDo'),
  myMoment().add(5, 'd').format('MMMDo'),
  myMoment().add(6, 'd').format('MMMDo'),
  myMoment().add(7, 'd').format('MMMDo'),
  myMoment().add(8, 'd').format('MMMDo'),
  myMoment().add(9, 'd').format('MMMDo'),
  myMoment().add(10, 'd').format('MMMDo'),
  myMoment().add(11, 'd').format('MMMDo'),
  myMoment().add(12, 'd').format('MMMDo'),
  myMoment().add(13, 'd').format('MMMDo'),
  myMoment().add(14, 'd').format('MMMDo'),
  myMoment().add(15, 'd').format('MMMDo'),
])


const setRef = (el: HTMLElement, index: any) => {
  swiperList.value.push(el)
}
const tabChange = (index: any) => {
  if (current.value !== index) {
    swiperList.value[current.value].doClear()
  }
  current.value = index
}

const onRefresh = () => {
  swiperList.value[current.value].doReload(() => {
    paging.value.complete([])
  })
}
const scrolltolower = () => {
  swiperList.value[current.value].doLoadMore()
}
/**
 * 滑动中
 * @param e
 */
const swiperTransition = (e: any) => {
  tabs.value.setDx(e.detail.dx)
}
/**
 * 滑动结束
 * @param e
 */
const swiperAnimationfinish = (e: any) => {
  if (current.value !== e.detail.current) {
    swiperList.value[current.value].doClear()
  }
  tabs.value.unlockDx()
  current.value = e.detail.current
}
const heightChanged = (height: any) => {
  if (height === 0) {
    height = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
  }
  swiperHeight.value = height
}

defineExpose({
  onRefresh
})
</script>

<style scoped>


</style>
